<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .wp {
            width: 1200px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
        }
        
        .linear {
            width: 1200px;
            height: 2px;
            background: #ccc;
        }
        
        .circle {
            width: 16px;
            height: 16px;
            background: #ccc;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
        }
        
        .circle1 {
            left: 0;
        }
        
        .circle2 {
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .circle3 {
            right: 0;
        }
        
        .on {
            background: orange;
        }
        
        .linearOrange {
            height: 2px;
            background: orange;
            position: absolute;
            top: 0;
        }
        
        .img {
            position: absolute;
            top: -50px;
        }
        
        img {
            width: 13px;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="wrapper">
            <div class="circle circle1 on" data-num="0"></div>
            <div class="circle circle2" data-num="500"></div>
            <div class="circle circle3" data-num="1000"></div>
            <div class="linearOrange" style="width:2px"></div>
        </div>
        <div class="linear"></div>
        <div class="img">
            <h5>0</h5>
            <img src="./img/position.png" alt="" srcset="">
        </div>
    </div>

    <script src="jquery-2.2.4.js"></script>



    <script>
        let flag = true;
        $(".circle").on("click", function() {
            if (!flag) {
                return
            }
            flag = false;
            let $this = $(this);
            let index = $this.index();
            let cleft = $this.position().left;
            let spped1 = 2500 / index; //触发路过小圆点的时间
            let timer;
            let textTimer;
            let num = $this.attr("data-num");
            let sum = 0;
            let speed2 = (2500 / num) * 10;
            $(".linearOrange").animate({
                width: cleft
            }, 2500, "linear", function() {
                $this.addClass("on")
            })

            timer = setInterval(function() {
                if ($(".linearOrange").width() > $(".on:last").position().left) {
                    $(".on:last").next().addClass("on")
                }
                if ($(".circle.on").length === (index + 1)) {
                    clearInterval(timer)
                }
            }, spped1)

            $(".img").animate({
                left: cleft
            }, 2500, "linear")
            textTimer = setInterval(function() {
                sum += 10;
                if (sum == num) {
                    clearInterval(textTimer)
                }
                $("h5").html(sum)
            }, speed2)

        })
    </script>

    <!-- <script>
        let flag = true;
        $(".circle").on("click", function() {
            if (!flag) {
                return;
            }
            flag = false;
            let $this = $(this);
            let cleft = $this.position().left;
            let index = $this.index();
            let timer;
            let speed1 = 2500 / index;
            let num = $this.attr("data-num");
            let textTimer;
            let sum = 0;
            let speed2 = (2500 / num) * 10;

            $(".linearOrange").animate({
                width: cleft
            }, 2500, "linear", function() {
                $this.addClass("on")
            })


            timer = setInterval(function() {
                if ($(".linearOrange").width() > $(".on:last").position().left) {
                    $(".on:last").next().addClass("on")
                }
                if ($('.circle.on').length === (index + 1)) {
                    clearInterval(timer);
                }
            }, speed1)

            $(".img").animate({
                left: cleft
            }, 2500)

            textTimer = setInterval(function() {
                sum += 10;
                if (sum == num) {
                    clearInterval(textTimer)
                }
                $("h5").html(sum)
            }, speed2)

        })
    </script> -->





































    <!-- <script>
        let flag = true;
        $(".circle").on("click", function() {
            if (!flag) {
                return;
            }

            flag = false;
            let $this = $(this);
            let index = $this.index();
            let cleft = $this.position().left;
            let speed1 = 2500 / index;
            let timer;
            let textTimer;
            let num = 0;
            let sum = $this.attr('data-num');
            let speed2 = (2500 / sum) * 10;


            $(".linearOrange").animate({
                width: cleft
            }, 2500, "linear", function() {
                $this.addClass("on")
            })


            timer = setInterval(function() {
                if ($(".linearOrange").width() > $(".circle.on:last").position().left) {
                    $(".circle.on:last").next().addClass("on")
                }
            }, speed1)


            $(".img").animate({
                left: cleft
            }, 2500, "linear")


            textTimer = setInterval(function() {
                num += 10;
                if (num == sum) {
                    clearInterval(textTimer);
                }
                $("h5").html(num)
            }, speed2)

        })
    </script> -->
    <!-- <script>
        let num = 0;
        let flag = true;
        $('.circle').on('click', function() {

            if (!flag) {
                return;
            }
            flag = false;

            let index = $(this).index();
            let left = $(this).position().left;
            let timer;
            let time;

            $(".linearOrange").animate({
                width: left
            }, 2500)

            time = setInterval(() => {
                if ($('.linearOrange').width() >= $('.circle.on:last').next().position().left) {
                    $('.circle.on:last').next().addClass('on')
                }
                if ($('.circle.on').length === (index + 1)) {
                    clearInterval(time);
                }
            }, 100)

            $(".img").animate({
                left: left
            }, 2500, "linear")

            let speed = (2500 / $(this).attr('data-num') * 10)

            console.log(speed);


            timer = setInterval(() => {
                num += 10
                $("h5").html(num)
                if (num == $(this).attr('data-num')) {
                    clearInterval(timer)
                    return;
                }
            }, speed)
        })
    </script> -->
</body>

</html>